<template>
  <div>
    <el-dialog
      title="审计项目台账" fullscreen :visible.sync="ledgerDialog" width="800px" custom-class="ledger" @open="onSearch()" @close="cancelDialog()">
      <el-form ref="ledgerForm" :model="ledgerForm" label-width="100px">
        <el-row>
          <el-col :span="6" class="coltitle">
            <el-form-item label="审计项目编号">
              <div>{{ ledgerForm.number }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="工作年度" prop="year" :rules="{required: true, message: '工作年度不能为空', trigger: 'blur'}">
              <el-input v-model="ledgerForm.year"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="立项人">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="form.createdLeader" disabled></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="showUserDialog(['createdLeader', 'createdLeaderId'], 'user')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="立项日期">
              <el-date-picker
                class="datePicker"
                v-model="ledgerForm.createdTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="coltitle">
            <el-form-item label="审计项目名称">
              <el-input v-model="ledgerForm.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="coltitle">
            <el-form-item label="被审计对象">
              <el-input v-model="ledgerForm.overName"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">基本信息</div>
        <el-row>
          <el-col :span="6" class="coltitle">
            <el-form-item label="管理层级" prop="manageLevel">
              <el-select v-model="ledgerForm.manageLevel" filterable placeholder="请选择">
                <el-option
                  v-for="item in manageLevelList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="计划性质" prop="manageLevel">
              <el-select v-model="ledgerForm.manageLevel" filterable placeholder="请选择">
              <el-option
                v-for="item in planList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="项目来源" prop="source">
              <el-select v-model="ledgerForm.source" filterable placeholder="请选择">
              <el-option
                v-for="item in sourceList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="组织方式" prop="teamType">
              <el-select v-model="ledgerForm.teamType" filterable placeholder="请选择">
              <el-option
                v-for="item in teamTypeList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="coltitle">
            <el-form-item label="项目进度" prop="teamType">
              <el-select v-model="ledgerForm.projectProcess" filterable placeholder="请选择">
              <el-option
                v-for="item in projectProcessList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="计划状态" prop="planStatus">
              <el-select v-model="ledgerForm.planStatus" filterable placeholder="请选择">
              <el-option
                v-for="item in planStatusList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="审计类型" prop="auditStatus">
              <el-select v-model="ledgerForm.auditStatus" filterable placeholder="请选择">
              <el-option
                v-for="item in auditStatusList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="审计子类型" prop="auditStatus">
              <el-select v-model="ledgerForm.auditNext" filterable placeholder="请选择">
                <el-option
                  v-for="item in auditNextList"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" class="coltitle">
            <el-form-item label="审计方式" prop="auditType">
              <el-select v-model="ledgerForm.auditType" filterable placeholder="请选择">
              <el-option
                v-for="item in auditTypeList"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="coltitle">
            <el-form-item label="审计区间" prop="planStatus">
              <el-date-picker
                v-model="auditArrayTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="(e) => datePicker(e, 'auditArrayTime')"
                >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="是否披露" prop="isPublish">
              <el-radio-group v-model="ledgerForm.isPublish">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="coltitle">
            <el-form-item label="审计目的" prop="auditpurpose">
              <el-input v-model="ledgerForm.auditpurpose"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="coltitle">
            <el-form-item label="审计内容" prop="auditContent">
              <el-input v-model="ledgerForm.auditContent"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="coltitle">
            <el-form-item label="审计范围" prop="auditRange">
              <el-input v-model="ledgerForm.auditRange"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="coltitle">
            <el-form-item label="关注重点" prop="auditFocus">
              <el-input v-model="ledgerForm.auditFocus"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-row>
          <el-col :span="24" class="coltitle">
            <el-form-item label="程序与方法" prop="proceduresMethods">
              <el-input v-model="ledgerForm.proceduresMethods"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        </el-row>
        <div class="title">审计分工</div>
        <el-row>
          <el-col :span="5" class="coltitle">
            <el-form-item label="审计组组长" prop="auditLeader">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="form.createdLeader" disabled></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="showUserDialog(['createdLeader', 'createdLeaderId'], 'user')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="5" class="coltitle">
            <el-form-item label="审计组主审" prop="auditJudge">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="form.createdLeader" disabled></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="showUserDialog(['createdLeader', 'createdLeaderId'], 'user')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="9" class="coltitle">
            <el-form-item label="审计组成员" prop="auditMember">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="form.createdLeader" disabled></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="showUserDialog(['createdLeader', 'createdLeaderId'], 'user')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <el-col :span="5" class="coltitle">
            <el-form-item label-width="130px" label="被审单位资料员" prop="auditReviewed">
              <el-row>
                <el-col :span="12">
                  <el-input v-model="form.createdLeader" disabled></el-input>
                </el-col>
                <el-col :span="12">
                  <el-button @click="showUserDialog(['createdLeader', 'createdLeaderId'], 'user')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10" class="coltitle">
            <el-form-item label="审计工作时间" prop="auditWorkArrayTime">
              <el-date-picker
                v-model="auditWorkArrayTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="(e) => datePicker(e, 'auditWorkArrayTime')"
                >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="14" class="coltitle">
            <el-form-item label="主审单位" prop="auditCompany">
              <el-row>
                <el-col :span="10">
                  <el-input v-model="form.createdLeader" disabled></el-input>
                </el-col>
                <el-col :span="14">
                  <el-button @click="showUserDialog(['createdLeader', 'createdLeaderId'], 'company')">请选择</el-button>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8" class="coltitle">
            <el-form-item label="审计工作量" prop="worNum">
              <el-input v-model="ledgerForm.worNum">
                <template slot="append">人天</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="coltitle">
            <el-form-item label-width="200px" label="抽调专职审计人员" prop="worNum">
              <el-input v-model="ledgerForm.worNum">
                <template slot="append">人次</template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="coltitle">
            <el-form-item label-width="200px" label="抽调其他人员">
              <el-input v-model="ledgerForm.worNum">
                <template slot="append">人次</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">审计分工</div>
        <el-row>
          <el-col :span="10" class="coltitle">
            <el-form-item label="审计准备阶段" prop="auditLeader">
              <el-date-picker
                v-model="auditWorkArrayTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="(e) => datePicker(e, 'auditWorkArrayTime')"
                >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="14" class="coltitle">
            <el-form-item label="审计实施阶段" prop="auditJudge">
              <el-date-picker
                v-model="auditWorkArrayTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="(e) => datePicker(e, 'auditWorkArrayTime')"
                >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="10" class="coltitle">
            <el-form-item label="审计完成阶段" prop="auditLeader">
              <el-date-picker
                v-model="auditWorkArrayTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="(e) => datePicker(e, 'auditWorkArrayTime')"
                >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6" class="coltitle">
            <el-form-item label="项目归档关闭" prop="auditJudge">
              <el-date-picker
                style="width: 100%;"
                v-model="auditWorkArrayTime"
                type="date"
                value-format="yyyy-MM-dd"
                @change="(e) => datePicker(e, 'auditWorkArrayTime')"
                >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8" class="coltitle">
            <el-form-item label-width="170px" label="项目实际归档关闭日期" prop="auditJudge">
              <el-date-picker
                style="width: 100%;"
                v-model="auditWorkArrayTime"
                type="date"
                value-format="yyyy-MM-dd"
                @change="(e) => datePicker(e, 'auditWorkArrayTime')"
                >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="title">审计文书</div>
        <el-tabs v-model="activeDocumentName" type="card" @tab-click="handleClick">
          <el-tab-pane label="通知书" name="first">
            <formDocument />
          </el-tab-pane>
          <el-tab-pane label="征求意见稿" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="审计报告" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="建议书" name="fourth">定时任务补偿</el-tab-pane>
          <el-tab-pane label="整改报告" name="sixth">定时任务补偿</el-tab-pane>
        </el-tabs>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">保存并关闭</el-button>
        <el-button @click="dialogVisible = false">保存并修改下一条</el-button>
        <el-button @click="dialogVisible = false">保存</el-button>
        <el-button @click="dialogVisible = false">取消</el-button>
        <div class="rightbtn"><el-button @click="dialogVisible = false">只能校验</el-button></div>
      </span>
    </el-dialog>
    <formTransfer :transferDialog="transferDialog" :userType="userType" :multiple="multiple" @ransferData="ransferDataHandle"  />
  </div>
</template>

<script>
import FormTransfer from "@/components/form/transfer";
import formDocument from "@/components/form/document";
export default {
  name: 'chose-ledger',
  components: { FormTransfer, formDocument },
  props: {
    ledgerDialog: Boolean,
    guideId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      ledgerForm:{
        number: 'SJ-XM20220031'
      },
      auditArrayTime: [],
      auditWorkArrayTime: [],
      query: {
        userId: null,
        username: '',
        phone: '',
      },
      page: {
        size: 10,
        current: 1,
        total: 0
      },
      data: [],
      relateData: {},
      value: [],
      selectItem:[],
      manageLevelList: [{
        label: '集团统一',
        id: 1
      }, {
        label: '集团授权',
        id: 2
      }, {
        label: '公司自定',
        id: 3
      }, {
        label: '领导临时交办',
        id: 4
      }],
      planList: [{
        label: '指令性计划',
        id: 1
      }, {
        label: '指导性计划',
        id: 2
      }, {
        label: '自主性计划',
        id: 3
      }],
      sourceList: [{
        label: '年度工作计划',
        id: 1
      }, {
        label: '被审计单位申报',
        id: 2
      }, {
        label: '人事部门委托',
        id: 3
      }, {
        label: '领导交办',
        id: 4
      }, {
        label: '上级授权',
        id: 5
      }, {
        label: '其他',
        id: 6
      }],
      teamTypeList: [{
        label: '独立审计',
        id: 1
      }, {
        label: '内部联合审计',
        id: 2
      }, {
        label: '外部联合审计',
        id: 3
      }, {
        label: '委托审计',
        id: 4
      }],
      projectProcessList: [{
        label: '新建计划',
        id: 1
      }, {
        label: '准备阶段',
        id: 2
      }, {
        label: '正在实施',
        id: 3
      }, {
        label: '完成阶段',
        id: 4
      }, {
        label: '后续跟踪',
        id: 5
      }, {
        label: '项目关闭',
        id: 6
      }, {
        label: '异常终止',
        id: 7
      }],
      planStatusList: [{
        label: '上年结转',
        id: 1
      }, {
        label: '本年新建',
        id: 2
      }, {
        label: '年中调整',
        id: 3
      }, {
        label: '结转下年',
        id: 4
      }],
      auditStatusList: [{
        label: '财务审计',
        id: 1
      }, {
        label: '经济责任审计',
        id: 2
      }, {
        label: '建设项目审计',
        id: 3
      }, {
        label: '经济效益审计',
        id: 4
      }, {
        label: '信息系统审计',
        id: 5
      }, {
        label: '内控控制审计',
        id: 6
      }, {
        label: '风险管理审计',
        id: 7
      }, {
        label: '专项审计',
        id: 8
      }, {
        label: '其他审计',
        id: 9
      }],
      auditNextList: [{
        label: '任中审计',
        id: 1
      }, {
        label: '离任审计',
        id: 2
      }],
      auditTypeList: [{
        label: '任中审计',
        id: 1
      }, {
        label: '离任审计',
        id: 2
      }],
      activeDocumentName: 'first'
    }
  },
  methods: {
    // 确认
    confirmDialog() {
      this.$emit('setValue', this.relateData)
      this.relateData = {}
      this.cancelDialog()
    },
    // 关闭
    cancelDialog() {
      this.$refs['queryForm'].resetFields()
      this.$emit('closeDialog', false)
    },
    onSearch() {
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchReset() {
      this.query = {};
      this.page.current = 1;
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.current = 1;
      this.onLoad(this.page, params);
      done();
    },
    currentChange(current) {
      this.page.current = current;
      this.onLoad(this.page, this.query);
    },
    sizeChange(size) {
      this.page.size = size;
      this.onLoad(this.page, this.query);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      fetchList(Object.assign(params, this.query, page)).then(res => {
        this.loading = false;
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
      }, () => {
        this.loading = false;
      });
    },
    relateClick(val) {
      this.relateData = val;
      this.confirmDialog();
    },
    datePicker(e, name) {
      this.ledgerForm[name + 'start'] = e[0]
      this.ledgerForm[name + 'end'] = e[1]
    },
    handleClick() {},
    ransferDataHandle(e) {
      this.transferDialog = false
      let currentval = [], currentLabel = []
      if (e.list.length > 1) {
        e.list.forEach(item => {
          currentval.push(item.id)
          currentLabel.push(item.label)
        })
      } else {
        currentval = [e.list[0].id]
        currentLabel = [e.list[0].label]
      }
      this.$set(this.form, this.userTypeArr[0], currentLabel.join(','))
      this.$set(this.form, this.userTypeArr[1], currentval.join(','))
    },
  }
}
</script>

<style>
 .ledger .el-dialog__header {
  padding: 40px 10% 10px;
 }
 .ledger .el-dialog__title {
  display: flex;
  justify-content: center;
  padding-bottom: 10px;
  border-bottom: 3px solid #409EFF;
  font-size: 24px;
 }
 .ledger .dialog-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  padding: 10px 15px 0;
  background-color: #EBEEF5;
  text-align: center;
 }
 .ledger .dialog-footer .rightbtn {
  float: right;
 }
 .ledger .el-dialog__body {
  padding: 10px 10% 80px;
 }
 .ledger .el-dialog__body .title {
    color: #222222!important;
    border-bottom: 0!important;
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 10px;
    margin: 10px 0;
    background-color: #f7f7f7;
  }
  .ledger .el-dialog__body .title::before {
    content: '';
    display: inline-block;
    height: 12px;
    width: 6px;
    background: #409EFF;
    margin-right: 5px;
    top: 5px;
  }
  .ledger .el-dialog__body .el-col {
    color: #222222;
    padding: 0;
    margin: 0;
  }
  .ledger .el-dialog__body .el-col.coltitle {
    font-size: 13px;
  }
  .ledger .el-dialog__body .el-input__inner {
    border: 0;
    border-bottom: 1px solid #DCDFE6;
    border-radius: 0;
  }

 .ledger .el-dialog__body .el-input__inner:disabled {
   background-color: transparent;
   color: black;
 }

  .ledger .el-dialog__body .el-form-item {
    margin-bottom: 5px;
  }
  .ledger .el-dialog__body .el-form-item__error {
    z-index: 1;
  }
  .ledger .el-dialog__body .el-input-group__append {
    background: inherit;
    border: 0;
  }
  .datePicker {
    width: 100%!important;
  }
</style>
